<template>
  <div>
    <div class="one">
      <i class="iconfont icon-zuojiantou" @click="fun()"></i>
      <span>&nbsp;&nbsp;数字专辑</span>
    </div>
    <!-- vant 轮播图 -->
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F75333dfa359471d11df3f7b36a70bd02096b8ecd7e6c-PbOa5V_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633764939&t=931d3e338ad6386f170ce3959a35d9c2"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F5ed7cba508fe9d67e45f2e7b79872046c39f9648340cd-Cr7WlI_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633764645&t=db8a2f2e73235d08070766df39485e4c"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F49455630054c3a01062ffcaf655aad7a20b303541d8cd-IFACK0_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633764874&t=e1f0da9c7b3510a7afea0628dce8d569"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.huabanimg.com%2Fe40344e3972dd70c45deed14b1de0c1ce799a85823132-PIKFjp_fw658&refer=http%3A%2F%2Fhbimg.huabanimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633764907&t=425d3ecfc509dedcd5af9a8c351226e2"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e7d65ee1bb5ca801215aa0fa16e0.jpg%402o.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633765537&t=8c209ea0d75e0e80b4975fca9b8cd58e"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F0cf1fb0155d0de415c1b41c7557eba3ea0910776192b7-jNgKbO_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633765064&t=af24083e8c3c729e28dbfbe00c9d12a7"
            alt=""
        /></van-swipe-item>
        <van-swipe-item
          ><img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi2.hdslb.com%2Fbfs%2Farchive%2Fb2e3319e35f38c80c2ee370556c8e6f4d64d7e69.jpg&refer=http%3A%2F%2Fi2.hdslb.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633765523&t=0fe38fb03a91505872bf79f9f86ac94f"
            alt=""
        /></van-swipe-item>
      </van-swipe>
    </div>
    <nav>
      <dl>
        <dt class="iconfont icon-paihangbang2 sss"></dt>
        <dd>畅销榜</dd>
      </dl>

      <dl>
        <dt class="iconfont icon-caidan1 sss"></dt>
        <dd>语种风格馆</dd>
      </dl>

      <dl>
        <dt class="iconfont icon-guangdie sss"></dt>
        <dd>已购</dd>
      </dl>
    </nav>
    <Zj5 />
    <Zj5 />
    <Wz7 />
    <Zj6 />
    <Wz7 />
    <Zj6 />
    <Wz8 />
    <Zj7 />
    <Zj5 />
    <Zj5 />
    <Zj5 />
    <Zj5 />
  </div>
</template>

<script>
import Vue from "vue";
import { Swipe, SwipeItem } from "vant";
import Zj5 from "../zujian/zujian5.vue";
import Zj6 from "../zujian/zujian6.vue";
import Wz7 from "../zujian/wenzi/wenzi7.vue";
import Zj7 from "../zujian/zujian7.vue";
import Wz8 from "../zujian/wenzi/wenzi8.vue";

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
  methods: {
    fun() {
      this.$router.push("/home");
    },
  },
  components: {
    Zj5,
    Zj6,
    Wz7,
    Zj7,
    Wz8,
  },
};
</script>

<style scoped>
dl {
  /* line-height: 2rem; */
  margin-top: 0.5rem;
}
dt {
  width: 0.89rem;
  height: 0.89rem;
  text-align: center;
  line-height: 0.89rem;
  background-color: rgb(238, 74, 62);
  border-radius: 0.5rem;
  /* color: #fff; */
  box-shadow: 0px 0px 6px 0px;
}
dd {
  /* line-height: 1.5rem; */
  text-align: center;
  margin-top: 0.2rem;
}
.sss {
  font-size: 0.5rem;
}
nav {
  height: 2rem;
  border-bottom: 1px #ccc solid;
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 0.2rem;
}
img {
  width: 100%;
  height: 2.88rem;
  border-radius: 0.2rem;
}
.banner {
  text-align: -webkit-center;
}

.van-swipe {
  width: 90%;
  height: 2.88rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
.one {
  width: 100%;
  height: 1.2rem;
  line-height: 1.2rem;
}
.icon-zuojiantou {
  font-size: 0.58rem;
  margin-left: 0.3rem;
}
span {
  font-size: 0.4rem;
  font-weight: 600;
}
</style>